<template>
    <el-container class="elContainer">
        <el-header style="background-color:  #EC4141;"><HeaderBar></HeaderBar></el-header>
        <el-container>
            <el-aside width="160px"><AsideBar></AsideBar></el-aside>
            <el-main><router-view></router-view></el-main>
        </el-container>
    </el-container>
<BottomControl></BottomControl>
<musicDetailCard></musicDetailCard>

</template>

<script setup>
import HeaderBar from '../components/HeaderBar.vue'
import AsideBar from '../components/AsideBar.vue'
import BottomControl from '../components/BottomControl.vue';
import musicDetailCard from  '../views/MusicDetailCard/MusicDetailCard.vue'
</script>

<style lang="scss" scoped>
.common-layout{
    overflow: scroll;
}
.elContainer{
    height: calc(100% - 60px);
}
</style>